<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />    
    <link rel="stylesheet" type="text/css" href="./css/aui-slide.css" />
    <link rel="stylesheet" type="text/css" href="./css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <script type="text/javascript" src="./script/jquery.min.js"></script>
    <script type="text/javascript" src="./script/doT.min.js"></script>
    <script type="text/javascript" src="./script/base.js"></script>
    <script type="text/javascript" src="./script/api.js"></script></head>
    <script type="text/javascript" src="./script/jquery-3.2.0.js"></script>
</head>
<body>
    <header class="header header-f" style="padding-top:2rem; height:4rem;">
        <div class="header-l aui-pull-left" onclick="closeWin()">
            <i class="fa fa-angle-left"></i>
        </div>
        <div class="header-title">
            订单详情
        </div>
        <div class="header-r aui-pull-right">
        </div>
    </header>
    <div style="height:4rem;"></div>

    <div id="list">


    </div>

    <!-- <div class="goods-details-buy-t"></div> -->
<!--     <div class="order-details-d">
        <div class="order-details-d-btn">取消订单</div>
        <div class="order-details-d-btn active">支付订单</div>
    </div> -->


</body>
<script type="text/javascript" src="./script/api.js"></script>
<script type="text/template" id="template">
    <div class="order-details-t">
        {{=it.info.status_data.name}}
        <p>订单金额：￥{{=it.info.order_price}}</p>
    </div>

    <div class="goods-order-map aui-margin-b-15">
        <div class="goods-order-map-l">
            <i class="fa fa-map-marker"></i>
        </div>
        <div class="goods-order-map-m">
            <!-- <p>请添加收货地址</p> -->
            <p>{{=it.info.receive_name}}<span>{{=it.info.receive_tel}}</span></p>
            <p>{{=it.info.receive_province}}{{=it.info.receive_city}}{{=it.info.receive_region}}{{=it.info.receive_address}}</p>
        </div>
    </div>

    <div class="aui-content">
        <ul class="aui-list aui-list-in">
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">分销商城</div>
                </div>
            </li>
        </ul>
    </div>
    {{~it.orderGoods:value:index}}
    <div class="goods-order-goods">
        <img src="{{=value.goods_image}}">
        <dl>
            <dt>{{=value.goods_name}}</dt>
            <dd>
                {{~value.goods_options:valuee:indexx}}
                {{=valuee.name}}: {{=valuee.value}}
                {{~}}
                {{? value.delivery_status == 1}}
                <p>已发货</p>
                {{??}}
                <p>未发货</p>
                {{?}}
                <p>￥{{=value.goods_price}}<span>x{{=value.goods_qty}}</span></p>
            </dd>
        </dl>
        <div class="order-details-d-btn" onclick="refundGoods({{=value.sub_id}});">申请退款</div>
        <div class="order-details-d-btn" onclick="commitGoods('{{=index}}');">评价商品</div>
    </div>
    {{~}}
    <div class="aui-content">
        <ul class="aui-list aui-list-in">
<!--             <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">商品小计</div>
                    <div class="aui-list-item-right">￥1599.00</div>
                </div>
            </li> -->
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">运费</div>
                    <div class="aui-list-item-right">￥{{=it.info.delivery_price}}</div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">实付费(含运费)</div>
                    <div class="aui-list-item-right c-red">￥{{=it.info.pay_price}}</div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">订单编号</div>
                    <div class="aui-list-item-right">{{=it.info.order_no}}</div>
                </div>
            </li>
            <li class="aui-list-item">
                <div class="aui-list-item-inner">
                    <div class="aui-list-item-title">创建时间</div>
                    <div class="aui-list-item-right">{{=it.info.order_create_time}}</div>
                </div>
            </li>
        </ul>
    </div>
</script>
<script type="text/javascript">

    apiready = function(){
        order_no = api.pageParam.id;
        // alert(order_no)
        loadData();
    }
    
    // 加载数据
    function loadData(){
        var userid = $api.getStorage('userid');
        var authtoken = $api.getStorage('authtoken');
        api.ajax({
            url: webAddress + '/a/mall/Order/info',
            method: 'get',
            data: {
                values: {
                    order_no: order_no,
                },
            },
            headers: {
                TOKEN: token,
                authuid: userid,
                authtoken: authtoken,
            },
        },function(ret, err){
            if (ret) {
                // alert( JSON.stringify( ret ) );
                ret.result.info.order_create_time = toDate(ret.result.info.order_create_time);
                goods_info = ret.result.orderGoods;
                // alert(JSON.stringify(goods_info))
                templateFun(ret.result);
            } else {
                alert( JSON.stringify( err ) );

                api.toast({
                    msg: err.body.message,
                    duration: 2000,
                    location: 'bottom'
                });
                templateFun();
                return false;
            }
        });
    }

    // 模板赋值函数
    function templateFun(data){
        if (data) {
          var template = $api.byId('template');
          var dotFn = doT.template(template.innerHTML);
          var html = dotFn(data);
          var list = $api.byId('list');
          $api.html(list, html);
      }
  }

    // 字符串转时间
    function toDate(timestamp){
        // 宁哥提供代码
            // var newDate = new Date();
            // newDate.setTime(timestamp * 1000);
            // return newDate.toLocaleDateString();
            
            //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var date = new Date(timestamp * 1000);
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
            var D = date.getDate() + ' ';
            var h = date.getHours() + ':';
            var m = date.getMinutes() + ':';
            var s = date.getSeconds();
            return Y+M+D+h+m+s;
            // return Y+M+D;
        }

    // 评价商品
    function commitGoods(index){
        // alert(JSON.stringify(goods_info));
        goods_info = goods_info[index];
        var delay = 0;
        if(api.systemType != 'ios'){
            delay = 300;
        }
        api.openWin({
            name: 'evaluate',
            url: './evaluate.html',
            bounces:false,
            delay: delay,
            slidBackEnabled:true,
            vScrollBarEnabled:false,
            progress:{
                type:"page"
            },
            pageParam:{
                goods_info: goods_info,
            }
        });
    }

    // 退款
    function refundGoods(goods_no){
        var delay = 0;
        if(api.systemType != 'ios'){
            delay = 300;
        }
        api.openWin({
            name: 'aftersale',
            url: './aftersale.html',
            bounces:false,
            delay: delay,
            slidBackEnabled:true,
            vScrollBarEnabled:false,
            progress:{
                type:"page"
            },
            pageParam:{
                goods_no: goods_no,
            }
        });
    }

    function openClub(){
        var delay = 0;
        if(api.systemType != 'ios'){
            delay = 300;
        }
        api.openWin({
            name: 'club_win',
            url: './html/club_win.html',
            bounces:false,
            delay: delay,
            slidBackEnabled:true,
            vScrollBarEnabled:false,
            progress:{
                type:"page"
            }
        });
    }

    function closeWin(){
        api.closeWin({
        });
    }
</script>
</html>